<!-- 下拉菜单 -->
<template>
    <el-dropdown trigger="click">
        <div class="si-dropdown">
            <slot></slot>
            <el-icon style="font-size: 14px;"><icon-caret-bottom /></el-icon>
        </div>
        <template #dropdown>
            <el-dropdown-menu class="si-dropdown-menu">
                <template v-for="(element, index) in list">
                    <el-dropdown-item @click.native="onCommand(element)">
                        <slot name="dropdownItem" v-bind="{ element }"></slot>
                    </el-dropdown-item>
                </template>
            </el-dropdown-menu>
        </template>
    </el-dropdown>
</template>

<script>
import { defineComponent, toRefs } from 'vue'
export default defineComponent({
    name: 'SiDropdown',
    props: {
        list: {
            type: Array,
            default: () => ([])
        }
    },
    emits: ['command'],
    setup(props, { emit }) {
        const { list } = toRefs(props)

        const onCommand = data => {
            emit('command', data)
        }

        return {
            list,
            onCommand
        }
    }
})
</script>

<style lang="less" scoped>
.si-dropdown {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    box-sizing: border-box;
    cursor: pointer;
}
.si-dropdown-menu {
    padding: 0;
    .el-dropdown-menu__item {
        padding: 5px 10px;
    }
}
</style>